<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8" />
		<title>个人中心</title>
		<link rel="stylesheet" th:href="@{/static/before/css/style.css}" />
            <script>
			/*评星星*/
			$(function() {
				//为星星设置hover效果
				var isClicked = false;
				var beforeClickedIndex = -1;
				var clickNum = 0; //点击同一颗星次数

				$('li').hover(
					function() {
						if(!isClicked) {
							$(this).css('color', '#F0AD4E');
							var index = $(this).index();

							for(var i = 0; i <= index; i++) {
								$('li:nth-child(' + i + ')').css('color', '#F0AD4E');
							}
						}
					},
					function() {
						if(!isClicked) {
							$('li').css('color', '#ADADAD');
						}
					}
				);

				//星星点击事件
				$('li').click(function() {
					$('li').css('color', '#ADADAD');
					isClicked = true;
					var index = $(this).index();

					for(var i = 1; i <= index + 1; i++) {
						$('li:nth-child(' + i + ')').css('color', '#F0AD4E');
					}
					if(index == beforeClickedIndex) { //两次点击同一颗星星 该星星颜色变化
						clickNum++;
						if(clickNum % 2 == 1) {
							$('li:nth-child(' + (index + 1) + ')').css('color', '#ADADAD');
						} else {
							$('li:nth-child(' + (index + 1) + ')').css('color', '#F0AD4E');
						}

					} else {
						clickNum = 0;
						beforeClickedIndex = index;
					}
				});
			});
		</script>
		<script src="../../static/before/js/jquery-3.4.1.min.js"></script>
	</head>

	<body>
	<div th:insert="before/header :: header"></div>
	<div th:insert="before/header02 :: header02"></div>
		<div>
			<p id="pinglun">对该商品进行评价</p><br />
			<hr>
			<br />
			<div class="p">
				<table id="teblegoods" cellpadding="7px" cellspacing="7px">
					<tr>
						<td style="width: 100px;">
							<center>
								<img class="imgs" src="image/5c_80.png" title="商品图片" />
							</center>
						</td>
						<td>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
							<span class="spangoods">商品名称</span>丨</td>
						<td><span class="spangoods">商品参数</span>丨</td>
						<td><span class="spangoods" style="color: red;">商品价格</span>丨</td>
						<td><span class="spangoods">订单状态</span>&nbsp;
						</td>
					</tr>
				</table>
				<br />

				<div class="p">
					<span style="font: '微软雅黑'; font-size: 20px;">请您对该商品进行评分:</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
					<!--点赞星星-->
					<ul class="stars">
						<li>★</li>
						<li>★</li>
						<li>★</li>
						<li>★</li>
						<li>★</li>
					</ul>
				</div>
				<br /><br /><br />
				<form id="comment_from" action="commentfrom">
				<div class="p">
					<p id="yijian">您可以写下您的意见，也可以上传图片。</p>
					<textarea id="textarea" th:value="yijian" name="textarea"></textarea>
					<div>
						<br />
						<input id="file" type="file" value="上传图片" />
						<input type="submit" id="send" value="发送评论" />
					</div>
				</div>
				</form>
			</div>

		</div>
		<br /><br /><br /><br /><br /><br />

	<div class="clear "></div>
	<div style="position: relative;top: 50px" th:insert="before/footer :: footer"></div>
	</body>

</html>